<template>
    <div>
        <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#D3DCE6"
      text-color="#000"
      active-text-color="#909399"
      router
      >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>学生信息录入及查询</span>
        </template>
          <el-menu-item index="/home/StuInfoEntry">学生信息录入</el-menu-item>
          <el-menu-item index="/home/StuinfoSelecth">学生信息查询</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span>成绩录入及查询</span>
        </template>
        <el-menu-item-group>
          <template slot="title">入学</template>
          <el-menu-item index="/home/entrygradeinput">入学成绩录入</el-menu-item>
          <el-menu-item index="/home/entrygradeselect">入学成绩查询</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">期中</template>
          <el-menu-item index="/home/midgradeinput">期中成绩录入</el-menu-item>
          <el-menu-item index="/home/midgradeselect">期中成绩查询</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">期末</template>
          <el-menu-item index="/home/endgradeinput">期末成绩录入</el-menu-item>
          <el-menu-item index="/home/endgradeselect">期末成绩查询</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/home/gradeanalysis">
          <i class="el-icon-menu"></i>
          <span slot="title">成绩分析</span>
      </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
export default{
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style lang="scss" scoped>

</style>